<template>
  <div class="person">

    <h2>姓名：{{ name }}</h2>
    <h2>年龄：{{ age }}</h2>
    <button @click="changeName">修改名字</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="showTel">查看联系方式</button>

  </div>
</template>
<script setup lang="ts" name="Person234">
  
    let name = '张三'
    let age = 18
    let tel = '13888888888'

      //方法
    function changeName(){
      name = 'zhang-san'      //注意：这样子修改name，页面是没有变化的
      console.log('@@@1',name)
    }
    function changeAge(){
        age += 1
        console.log('@@@2',age)
    }
    function showTel(){
      alert(tel)
    }

</script>
<style scoped>
  .person{
      background-color: skyblue;
      box-shadow: 0 0 10px;
      border-radius: 10px;
      padding: 20px;
  }

  button{
    margin: 0 5px;
  }


</style>